<template>
	<div>
		<el-dialog
		  v-model="dialog.visible"
		  :title="dialog.title"
		  :close-on-click-modal="false"
		  destroy-on-close
		  append-to-body
		  width="450px"
		  class="custom-fun-form"
		  @close="resetForm"
		>
			<el-form
			  ref="formRef"
			  :model="formData"
			  :rules="formRules"
			  label-width="100px"
			  label-position="top"
			>
				
				<el-form-item label="功能类型" prop="type">
				  <el-radio-group v-model="formData.type" >
					<el-radio-button label="method"  />
					<el-radio-button label="event" />
				  </el-radio-group>
				</el-form-item>
				
				<el-form-item label="功能名称" prop="name">
				  <el-input v-model="formData.name" placeholder="请输入名称" />
				</el-form-item>
				
				<el-form-item label="标识符" prop="name">
				  <el-input v-model="formData.identifier" placeholder="请输入名称" />
				</el-form-item>
				
			   <el-form-item  v-show="formData.type=='method'"  label="输入参数" prop="inputData">
				  <el-row
					v-for="(item, index) in formData.inputData"
					:key="index"
					:gutter="24"
					style="margin-left: 0px; margin-right: 0px; margin-bottom: 4px; background-color: #E3F2fd;"
				  >
					<el-col :span="17">
					  {{ "参数名称:"+item.name }}
					</el-col>
					<el-col :span="7">
					  <el-button text @click="editJson(item,index)">编辑</el-button>
					  <span style="padding: 0.3125rem;">|</span>
					  <el-button text @click="deleteJson(index)">删除</el-button>
					</el-col>
				  </el-row>
				  <el-row>
					<el-button :icon="Plus" link type="primary" @click.stop="addParameter" >增加参数</el-button>
				  </el-row>
				</el-form-item>
				
				<el-form-item  label="输出参数" prop="outputData">
				  <el-row
					v-for="(item, index) in formData.outputData"
					:key="index"
					:gutter="24"
					style="margin-left: 0px; margin-right: 0px; margin-bottom: 4px; background-color: #E3F2fd;"
				  >
					<el-col :span="17">
					  {{ "参数名称:"+item.name }}
					</el-col>
					<el-col :span="7">
					  <el-button text  @click="editJson(item,index)">编辑</el-button>
					  <span style="padding: 0.3125rem;">|</span>
					  <el-button text @click="deleteJson(index)">删除</el-button>
					</el-col>
				  </el-row>
				  <el-row>
					<el-button :icon="Plus" link type="primary" @click.stop="addParameter" >增加参数</el-button>
				  </el-row>
				</el-form-item>
				
				<el-form-item label="备注">
				  <el-input v-model="formData.desc" type="textarea" />
				</el-form-item>
			</el-form>

			<template #footer>
			  <div class="dialog-footer">
				<el-button type="primary" @click="submitForm"  :loading="loading">确 定</el-button>
				<el-button @click="closeDialog" :loading="loading">取 消</el-button>
			  </div>
			</template>
		</el-dialog>
		
		<EditParameter ref="editParameterRef"/>
	</div>
</template>

<script lang="ts" setup>
	
	import {ref,defineEmits } from 'vue'
	import type {FormRules } from 'element-plus'
	import EditParameter from "./EditParameter.vue";
	import { Plus } from '@element-plus/icons-vue'
	
	
	const loading = ref(false);
	const dialog = ref({
		visible:false,
		title:'',
	});
	
	const formRef=ref();
	const formData=ref({
		id:'',
		productId:'',
		type:'method',//method、event
		name:'',
		identifier:'',
		inputData:[],
		outputData:[],
		desc:''
	})
	
	const formRules=reactive<FormRules>({
	  name: [{ required: true, message: "参数必填", trigger: "blur" }],
	  identifier: [{ required: true, message: "参数必填", trigger: "blur" }],
	});
	
	const editParameterRef=ref();
	
	
	const json=ref([])
	
	const openDialog=(row:any)=>{
		if(row){
			dialog.value.visible=true;
			dialog.value.title='编辑功能';
			formData.value=row;
		}else{
			dialog.value.visible=true;
			dialog.value.title='新增功能';
			formData.value={
				id:'',
				productId:'',
				type:'method',//method、event
				name:'',
				identifier:'',
				inputData:[],
				outputData:[],
				desc:''
			};
		}
	}
	
	const addParameter=()=>{
		editParameterRef.value.openDialog();
	}
	
	const editJson=(item:any, index:number)=> {
	      // this.currentParameter = '0'
	      // this.parameterPane.visible = true
	      // this.parameterPane.data = item
	      // this.parameterPane.index = index
	}
	
	const deleteJson=(index:number)=> {
	      json.value.splice(index, 1)
	}
	
	
	const submitForm=()=>{
		formRef.value.validate((isValid: boolean) => {
		  if (isValid) {
		  }
		});
	}
	
	
	const emits = defineEmits(['closeDialog'])
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emits('closeDialog',formRef.value)
		resetForm();
	}
	
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value.resetFields();
		formRef.value.clearValidate();
		formData.value={
			id:'',
			productId:'',
			type:'method',//method、event
			name:'',
			identifier:'',
			inputData:[],
			outputData:[],
			desc:''
		};
	}	
	
	defineExpose({
	  openDialog,closeDialog
	});
	
	onMounted(() => {
	});
	
	
</script>

<style scoped>

	.custom-fun-form /deep/ .el-dialog__body {
    padding: 0 24px 8px;
  }

  .custom-fun-form /deep/ .el-form--label-top .el-form-item__label {
      padding: 0 0 0 0;
  }

  .custom-fun-form /deep/ .el-form-item--medium .el-form-item__label {
      line-height: 25px;
  }

  .custom-fun-form /deep/ .el-form-item {
      margin-bottom: 12px;
  }
  
  
  /deep/ .el-textarea__inner {
      background-color: transparent;
  }
</style>